import { Box, Typography } from '@mui/material';
import { useEffect, useState } from 'react';

import Disbursement from '../../api/disbursement/disbursement';
import DisbursementManager from '../../api/disbursement/disbursement-manager';
import { ActivePayoutItem } from './active-payout-item';

export const ActivePayouts = () => {
    const [disbursements, setDisbursements] = useState(null);

    useEffect(() => {
        DisbursementManager.getActive().then((disbursements: Array<Disbursement>) => {
            setDisbursements(disbursements);
        });
    }, []);

    return (
        <>
            {disbursements != null && disbursements.length > 0 && (
                <Box
                    className="d-flex justify-content-center flex-column mt-4 mb-4"
                    sx={{ width: 300, background: '#0B0821', borderRadius: '12px' }}
                >
                    <Typography variant="h4" sx={{ color: '#BCB6E9', pb: 2 }}>
                        Active Payout
                    </Typography>

                    {disbursements.map((disbursement: Disbursement) => {
                        return (
                            <ActivePayoutItem disbursement={disbursement} key={disbursement.id} />
                        );
                    })}
                </Box>
            )}
        </>
    );
};
